<template>
	<view ref="searchBox" class="dp-search" :style="{
		position: params.is_inline == 1 ? 'absolute' : 'relative',
		backgroundColor: params.bgcolor,
		margin: (params.margin_y * 2.2) + 'rpx ' + (params.margin_x * 2.2) + 'rpx',
		padding: (params.padding_y * 2.2) + 'rpx ' + (params.padding_x * 2.2) + 'rpx',
		width: params.width + '%',
		top: params.is_inline == 1 ? (params.inline_top * 2.2) + 'rpx' : '0',
	}">
		<!-- borderRadius: params.borderradius + '%'-->
		<view v-if="!params.openmore || params.openmore <= 0" class="dp-search-search"
			:style="{ borderColor: params.bordercolor, borderRadius: params.borderradius + 'px', height: params.height * 2.2 + 'rpx' }">
			<view class="dp-search-search-f1"></view>
			<view class="dp-search-search-f2">
				<input class="dp-search-search-input" @confirm="searchgoto" @input="inputKeyword"
					:data-url="params.hrefurl" name="keyword" :placeholder="params.placeholder || '输入关键字在店铺内搜索'"
					placeholder-style="color:#aaa;font-size:28rpx"
					:style="params.color ? 'color:' + params.color : ''" />
			</view>
			<view class="dp-search-search-f3" v-if="params.image_search == 1" @tap="goto"
				data-url="/pagesExt/shop/imgsearch"
				:style="'background-image:url(' + static_url + '/static/img/camera.png)'">
			</view>
			<view v-if="params.btn == 1">
				<view @tap="searchgoto" :data-url="params.hrefurl"
					:style="{ width: '100rpx', textAlign: 'center', float: 'right', lineHeight: '72rpx', backgroundColor: t('color2'), }">
					搜索
				</view>
			</view>
		</view>
		<view v-else style="display: flex;">
			<view style="width: 140rpx;overflow: hidden;">
				<!--搜索列表s-->
				<picker @change="dataChange" :value="data_index" :range="data" range-key='title1'
					style="line-height: 72rpx;background-color: #fff;padding-left: 10rpx;overflow: hidden;border: 0;">
					<view style="width:80rpx;white-space: nowrap;overflow: hidden;float: left;">{{ data_name }}</view>
					<image src="/static/img/hdsanjiao.png"
						style="width: 26rpx;height: 26rpx;float: right;margin-top: 26rpx;"></image>
				</picker>
				<!--搜索列表e-->
			</view>
			<view class="dp-search-search"
				:style="{ borderColor: params.bordercolor, borderRadius: params.borderradius + 'px', width: 'calc(100% - 140rpx)' }">
				<view class="dp-search-search-f1"></view>
				<view class="dp-search-search-f2">
					<input class="dp-search-search-input" @confirm="searchgoto" @input="inputKeyword"
						:data-url="data_hrefurl" name="keyword"
						:placeholder="data_placeholder ? data_placeholder : params.placeholder || '输入关键字在店铺内搜索'"
						placeholder-style="color:#aaa;font-size:28rpx"
						:style="params.color ? 'color:' + params.color : ''" />
				</view>
				<view class="dp-search-search-f3" v-if="params.image_search == 1" @tap="goto" :data-url="data_hrefurl"
					:style="'background-image:url(' + static_url + '/static/img/camera.png)'"></view>
			</view>
			<view v-if="params.btn == 1">
				<view @tap="searchgoto" :data-url="data_hrefurl"
					:style="{ width: '100rpx', textAlign: 'center', float: 'right', lineHeight: '72rpx', backgroundColor: t('color2'), }">
					搜索
				</view>
			</view>
		</view>
		<view class="share-btn" @tap="share" v-if="params.inline_share == 1"
			:style="{ height: params.height * 2.2 + 'rpx', lineHeight: params.height * 2.2 + 'rpx' }">
			<view class="share-btn-content">
				<button class="action-item-button" @tap="share" open-type="share">
				</button>
				<image class="img"
					src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250306/f76c82683244b5a6ee08e236baa94885.png" />
				<view class="share-text">分享</view>
			</view>
		</view>
	</view>
</template>
<script>
var app = getApp();
export default {
	name: 'dp-search', // 确保组件名称正确

	data() {

		return {
			pre_url: getApp().globalData.pre_url,

			data_index: 0,
			data_name: '', //类型名称
			data_placeholder: '', //搜索提示
			data_hrefurl: '',
			keyword: '',
			//navBarHeight: 0,	height:navBarHeight+'rpx',
			//windowWidth: 0,//width:windowWidth+'rpx'
			navBarTop: 0,
			//statusBarHeight:0,
			statusBarHeight: 0,
			contentH: 0,
			windowWidth: 0,
		}
	},
	props: {
		params: {},
		data: {}
	},
	mounted: function () {
		var that = this;
		// console.log(that.params)
		if (that.data) {
			that.data_name = that.data[0]['title1'];
			that.data_placeholder = that.data[0]['title2'];
			that.data_hrefurl = that.data[0]['hrefurl'];
			//  console.log("that.data[0]['hrefurl']",that.data[0]['hrefurl'])
			return;
			// 获取当前页面栈
			const pages = getCurrentPages();
			// 获取当前页面对象
			const currentPage = pages[pages.length - 1];
			// 获取当前页面路径
			const currentRoute = currentPage.route;
			if (1 || currentRoute === 'pages/index/index') {
				//if (uni.getLaunchOptionsSync().path == "pages/index/index") {
				// that.setSearch();
				that.setSearchPosition();
			}
		}
	},
	methods: {

		//设置搜索框位置
		setSearch() {
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
			this.statusBarHeight = info.statusBarHeight
			this.windowWidth = info.windowWidth
			this.navBarTop = this.statusBarHeight + 10; // 距离顶部为状态栏高度 + 10rpx
			// 除了h5 app mp-alipay的情况下执行
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// // 获取胶囊的位置
			//const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// (胶囊底部高度 - 状态栏的高度) + (胶囊顶部高度 - 状态栏内的高度) = 导航栏的高度
			// this.navBarTop = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info
			// 	.statusBarHeight)
			// //this.windowWidth = menuButtonInfo.left
			// this.windowWidth = windowWidth * 0.85;

			const systemInfo = uni.getSystemInfoSync(); // 获取系统信息
			const {
				windowWidth,
				windowHeight,
				statusBarHeight
			} = systemInfo;
			// 计算搜索框的位置
			this.navBarTop = this.statusBarHeight + 23; // 距离顶部为状态栏高度 + xxx rpx
			// #endif
		},


		setSearchPosition: function () {
			// 获取窗口信息
			const windowInfo = uni.getWindowInfo();
			// 获取系统信息
			const systemInfo = {
				statusBarHeight: windowInfo.statusBarHeight,
				screenWidth: windowInfo.screenWidth,
				windowWidth: windowInfo.windowWidth,
				windowHeight: windowInfo.windowHeight,
				pixelRatio: windowInfo.pixelRatio
			};

			let menuButtonInfo;
			try {
				menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			} catch (e) {
				console.log('获取胶囊按钮信息失败', e);
				// 设置默认值
				menuButtonInfo = {
					height: 32,
					top: systemInfo.statusBarHeight + 12
				};
			}

			// 如果获取不到胶囊信息，使用默认值
			if (!menuButtonInfo || !menuButtonInfo.top) {
				menuButtonInfo = {
					height: 32,
					top: systemInfo.statusBarHeight + 12
				};
			}

			this.statusBarHeight = systemInfo.statusBarHeight;
			this.contentH = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height;
			this.navBarTop = (systemInfo.statusBarHeight + this.contentH) * 2;
		},

		searchgoto: function (e) {
			var that = this;
			var keyword = that.keyword;
			var url = e.currentTarget.dataset.url;
			if (url.indexOf('?') > 0) {
				url += '&keyword=' + keyword;
			} else {
				url += '?keyword=' + keyword;
			}
			var opentype = e.currentTarget.dataset.opentype
			app.goto(url, opentype);
		},
		dataChange: function (e) {
			var that = this;
			var data = that.data;
			var data_index = e.detail.value;
			that.data_index = data_index;
			that.data_name = data[data_index]['title1'];
			that.data_placeholder = data[data_index]['title2'];
			that.data_hrefurl = data[data_index]['hrefurl'];
		},
		inputKeyword: function (e) {
			var that = this;
			that.keyword = e.detail.value;
		},
		share: function () {
			let that = this;
			that.share_title = app.globalData.name;
			that.share_path = '/pages/index/index';
			that.share_imageUrl = app.globalData.logo;
			uni.share({
				title: that.share_title,
				path: that.share_path,
				imageUrl: that.share_imageUrl,
			});
		}
	},
	onShareAppMessage() {
		return {
			title: this.share_title,
			path: this.share_path,
			imageUrl: this.share_imageUrl,
		};
	}
}
</script>
<style>
.dp-search {
	padding: 20rpx;
	height: auto;
	position: relative;
	z-index: 9;
	display: flex;

}

.dp-search-search {
	height: 72rpx;
	background: #fff;
	border: 1px solid #c0c0c0;
	border-radius: 6rpx;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.dp-search-search-f1 {
	height: 72rpx;
	width: 72rpx;
	color: #666;
	border: 0px;
	padding: 0px;
	margin: 0px;
	background: url('~@/static/img/search_ico.png') center no-repeat;
	background-size: 30rpx;
}

.dp-search-search-f2 {
	height: 72rpx;
	flex: 1
}

.dp-search-search-f3 {
	height: 72rpx;
	width: 72rpx;
	color: #666;
	border: 0px;
	padding: 0px;
	margin: 0px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 40rpx;
}

.dp-search-search-input {
	height: 72rpx;
	width: 100%;
	border: 0px;
	padding: 0px;
	margin: 0px;
	outline: none;
	color: #666;
}

.share-btn {
	width: 150rpx;
	/* position: absolute; */
	/* right: -20vw; */
	/* top: 0px; */
	text-align: center;
	color: white;
	line-height: 72rpx;
	height: 72rpx;
}

.share-btn-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.share-btn .img {
	width: 35rpx;
	height: 35rpx;
}

.share-btn .share-text {
	font-size: 32rpx;
	color: white;
	margin-left: 10rpx;
}

.action-item-button {
	width: 100rpx;
	height: 100rpx;
	position: absolute;
}

.action-item-button:active {
	background-color: transparent;
	/* 保持背景色不变 */
	color: inherit;
	/* 保持文字颜色不变 */
}
</style>